<template>
	<view class="page">
		<view
			class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left">店铺名称</view>
			<view class="_right text-cut  text-cut  text-right"><input type="text" placeholder="请输入店铺名称"
					v-model="info.store_name" placeholder-class="placeholder" maxlength="16" /></view>
		</view>
		<!-- <view class="shop-item bg-white height-100 padding-lr text-df flex justify-between align-center solid-bottom">
      <view class="_left">
        城市分站
      </view>
      <view class="_right text-cut  text-cut  text-right" @click="openPicker('city')">
        <text class="text-bf" v-if="!cityVal.id">请选择城市分站</text>
        <text v-else>{{cityVal.name}}</text>
        <text class="cuIcon-right margin-left-sm"></text>
      </view>
    </view> -->
		<view class="shop-item bg-white padding-tb  text-df flex justify-between align-center solid-bottom">
			<view class="_left">
				店铺logo
				<text>（150*150）</text>
			</view>
			<view class="_right text-right flex justify-end align-end">
				<!-- <view class="up-img" v-if="!info.store_logo" @click="upLoadImg('logo')"></view> -->
				<image src="../../static/upload-img.png" mode="" class="up-img" v-if="!info.store_logo" @click="upLoadImg('logo')"></image>
				<view class="img-wrap " v-else>
					<text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('logo')"></text>
					<image class="img" :src="store_logo" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="shop-item bg-white padding-tb  text-df flex justify-between align-center solid-bottom">
			<view class="_left ">
				店铺背景
				<text>（375*135）</text>
			</view>
			<view class="_right text-right flex justify-end">
				<!-- <view class="up-img bg" v-if="!info.store_backdrop" @click="upLoadImg('bg')"></view> -->
				<image src="../../static/upload-img.png" mode="" class="up-img bg" v-if="!info.store_backdrop" @click="upLoadImg('bg')"></image>
				<view class="img-wrap bg justify-end" v-else>
					<text class="cuIcon-roundclosefill text-666 text-lg close" @click="clearImg('bg')"></text>
					<image class="img" :src="store_bg" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<!-- 前端不选择 默认非入仓 -->
		<!-- <view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left">经营方式</view>
			<view class="_right text-cut  text-cut  text-right text-df flex justify-end align-center">
				<text class="text-lg" :class="info.run_type == 1 ? 'cuIcon-roundcheckfill' : 'cuIcon-round'"
					@click="handlerManagement(1)">
					<text class="padding-left-xs text-333 text-df">自营</text>
				</text>
				<text class="text-lg padding-left"
					:class="info.run_type == 2 ? 'cuIcon-roundcheckfill' : 'cuIcon-round'"
					@click="handlerManagement(2)">
					<text class="padding-left-xs text-333 text-df">非自营</text>
				</text>
			</view>
		</view> -->
		<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left">主营行业</view>
			<view class="_right text-cut  text-cut  text-right" @click="openPicker('industry')">
				<text class="text-bf" v-if="!industryVal.id">请选择主营行业</text>
				<text>{{ industryVal.name }}</text>
				<text class="cuIcon-right margin-left-sm"></text>
			</view>
		</view>
		<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left">入驻时长</view>
			<view class="_right text-cut  text-cut  text-right" @click="openPicker('time')">
				<text class="text-bf" v-if="!timeVal.id">请选择入驻时长</text>
				<text>{{ timeVal.name }}</text>
				<text class="cuIcon-right margin-left-sm"></text>
			</view>
		</view>
		<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left">保证金</view>
			<view class="_right text-cut  text-cut  text-right">
				<text class="">{{ money || '0.00'}} 元</text>
				<!-- <text v-else class="text-bf">保证金</text> -->
			</view>
		</view>
		<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left">服务费</view>
			<view class="_right text-cut  text-cut  text-right">
				<text v-if="info.service_money" class="">{{ info.service_money * (timeVal.id || 0) || '0.00'}} 元</text>
				<text v-else class="text-bf">服务费</text>
			</view>
		</view>
		<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left">总计</view>
			<view class="_right text-cut  text-cut  text-right">
				<text class="">{{ total }} 元</text>
			</view>
		</view>
		<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left ">店铺所在地</view>
			<view class="_right text-right flex align-center">
				<view @click="openPicker('region')" class="address text-cut">
					<text class="text-bf" v-if="!addr">请选择省市区县</text>
					<text class="text-333" v-else>{{ addr }}</text>
				</view>

				<!-- <view class="cuIcon-locationfill text-lg padding-left-sm" @click="location"></view> -->
				<text class="cuIcon-right margin-left-xs"></text>
			</view>
		</view>
		<view class="shop-item bg-white height-100  text-df flex justify-between align-center">
			<view class="_left ">店铺详情地址</view>
			<view class="_right text-right"></view>
		</view>
		<view class="shop-item bg-white   text-df  solid-bottom padding-bottom">
			<textarea type="text" placeholder="请输入详细地址" v-model="info.store_address" placeholder-class="placeholder" />
		</view>
		<view class="shop-item bg-white height-100 text-df flex justify-between align-center ">
			<view class="_left ">店铺简介</view>
			<view class=" text-right"></view>
		</view>
		<view class="shop-item bg-white   text-df  solid-bottom padding-bottom">
			<textarea v-model="info.store_introduce" placeholder="请输入店铺简介" placeholder-class="placeholder" />
		</view>
	<!-- 	<view class="shop-item bg-white   text-df flex justify-between align-center solid-bottom">
			<view class="_left ">工作日</view>
			<view class="_right flex justify-between flex-wrap padding-tb-xs">
				<text v-for="item in workDayList" :key="item.id" class="padding-tb-xs" @click="handlerWeek(item)">
					<text :class="item.isdo ? 'cuIcon-squarecheckfill' : 'cuIcon-square'">
						<text class="margin-left-xs text-333">{{ item.name }}</text>
					</text>
				</text>
			</view>
		</view> -->
		<!-- <view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left ">营业时间</view>
			<view class="_right text-right">
				<text @click="openPicker('times', 'start')">
					<text class="text-bf" v-if="!start_time">开始时间</text>
					<text class="text-333" v-else>{{ start_time }}</text>
				</text>
				<text class="margin-lr-sm">至</text>
				<text @click="openPicker('times', 'end')">
					<text class="text-bf" v-if="!end_time">结束时间</text>
					<text class="text-333" v-else>{{ end_time }}</text>
				</text>
			</view>
		</view> -->
		<view class="shop-item bg-white height-100  text-df flex justify-between align-center solid-bottom">
			<view class="_left ">客服电话</view>
			<view class="_right text-right"><input type="text" placeholder="请输入客服电话" v-model="info.service_phone"
					placeholder-class="placeholder" maxlength="18" /></view>
		</view>
		<view class="btn-wrap flex justify-between align-center margin-tb-xl margin-lr">
			<view class="btn" @click="handlerPre">上一步</view>
			<view class="btn active" @click="handlerNext">提交</view>
		</view>
		<!-- 城市分站 -->
		<w-picker :visible.sync="visible" mode="selector" :value="cityVal.name" default-type="name"
			:default-props="defaultProps" :options="cityList" @confirm="onConfirm($event, 'city')" @cancel="onCancel"
			ref="city"></w-picker>
		<!-- 主营行业 -->
		<w-picker :visible.sync="visible" mode="selector" :value="industryVal.name" default-type="name"
			:default-props="defaultProps" :options="industryList" @confirm="onConfirm($event, 'industry')"
			@cancel="onCancel" themeColor="#B82441" ref="industry"></w-picker>
		<!-- 入驻时长 -->
		<w-picker :visible.sync="visible" mode="selector" :value="timeVal.name" default-type="name"
			:default-props="defaultProps" :options="timeList" @confirm="onConfirm($event, 'time')" @cancel="onCancel"
			themeColor="#B82441" ref="time"></w-picker>
		<!-- 地址 -->
		<w-picker mode="region" :value="defVal" default-type="label" themeColor="#B82441"
			@confirm="onConfirm($event, 'region')" ref="region">请选择省市区</w-picker>
		<!-- 时间选择 -->
		<w-picker :visible.sync="visible" mode="time" :current="true" :second="false"
			@confirm="onConfirm($event, 'times')" @cancel="onCancel" :disabled-after="false" ref="times"
			themeColor="#B82441"></w-picker>
	</view>
</template>

<script>
	// @see 引入验证，上传图片
	import {
		UploadImage,
		validate
	} from '@/common/utils/index';
	import wPicker from '../../components/w-picker/w-picker.vue';
	// 高德地图sdk
	import amapFile from '@/libs/amap-wx.js';
	export default {
		data() {
			return {
				visible: false,
				defaultProps: {
					label: 'name',
					value: 'id'
				},
				cityVal: {}, //城市
				cityList: [{
					id: 1,
					name: '全国'
				}],
				industryVal: {}, //主营行业
				industryList: [],
				timeVal: {}, //城市
				timeList: [{
					id: 1,
					name: '一年'
				}],
				info: {
					store_name: '', //店铺名称
					store_level: '', //开店套餐
					main_industry: '', //主营行业
					stay_time: '', //入驻时长
					service_money: '', //服务费
					store_logo: '', //店铺logo
					run_type: 2, // 经验方式   1自营 2 非自营
					store_backdrop: '', // 店铺背景
					store_province_id: '', // 省code
					store_city_id: '', // 市code 
					store_district_id: '', // 区code
					store_province_name: '', // 省
					store_city_name: '', // 市
					store_district_name: '', // 区
					store_address: '',
					store_introduce: '',
					service_phone: '',
					business_hours: '', // 营业时间
					workday: '', // 工作日
				},
				addr: '', //地址
				store_logo: '',
				store_bg: '',
				defVal: [], // 默认地址
				myAmapFun: null, // 高德地图实例
				workDayList: [{
						id: 1,
						isdo: false,
						name: '星期一'
					},
					{
						id: 2,
						isdo: false,
						name: '星期二'
					},
					{
						id: 3,
						isdo: false,
						name: '星期三'
					},
					{
						id: 4,
						isdo: false,
						name: '星期四'
					},
					{
						id: 5,
						isdo: false,
						name: '星期五'
					},
					{
						id: 6,
						isdo: false,
						name: '星期六'
					},
					{
						id: 7,
						isdo: false,
						name: '星期日'
					}
				],
				start_time: '',
				end_time: '',
				time_type: 'start'
			};
		},
		computed: {
			money() {
				let year_money = this.industryVal.money || 0;
				// let num = this.timeVal.id || 0;
				// let total = (year_money*num).toFixed(2);
				return year_money;
			},
			total() {
				let year_money = this.industryVal.money || 0;
				let num = this.timeVal.id || 0;
				let total = this.info.service_money * num;
				let t = Number(total) + Number(year_money);
				// if (!total) t = 0;
				return t.toFixed(2);
			}
		},
		onLoad() {
			// 初始化高德地图SDK,记得换成自己的key
			// this.myAmapFun = new amapFile.AMapWX({
			// 	key: 'da1c01509a0dbea0bff1d85d45edc378'
			// });
			// 自动定位当前地址
			// this.autoGetLocation();
			// this.get_store_apply();
			this.getInfo()
		},
		methods: {
			// 获取入驻信息
			getInfo() {
				let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
				this.$api
					.post('/v1/61039de5147b5',{},{
						header:{
							Storeid:store_joinin_id,
						}
					})
					.then(res => {
						if (res.data.code == 1) {
							let data=res.data.data
							this.info={
								store_name: data.store_name||'', //店铺名称
								main_industry: data.my_main_industry_id||'', //主营行业
								stay_time: data.stay_time||'', //入驻时长
								store_logo: data.store_logo||'', //店铺logo
								run_type: data.run_type||2, // 经验方式   1自营 2 非自营
								store_backdrop: data.store_backdrop||'', // 店铺背景
								store_province_id: data.store_province_id||'', // 省code
								store_city_id: data.store_city_id||'', // 市code 
								store_district_id: data.store_district_id||'', // 区code
								store_province_name: data.store_province_name||'', // 省
								store_city_name: data.store_city_name||'', // 市
								store_district_name: data.store_district_name||'', // 区
								store_address: data.store_address||'',
								store_introduce: data.store_introduce||'',
								service_phone: data.service_phone||'',
							}
							this.addr=data.store_province_name+data.store_city_name+data.store_district_name
							this.store_logo=data.store_logo_url
							this.store_bg=data.store_backdrop_url
							// 主营行业
							if(data.my_main_industry_id>0){
								let index=data.main_industry.findIndex(item=>item.id==data.my_main_industry_id)
								this.industryVal={
									name: data.my_main_industry_name ,
									id:data.my_main_industry_id,
									money:data.main_industry[index].money
								}
							}
							
							// 入驻时长
							this.timeVal={
								name: data.stay_time_arr[data.stay_time] ,
								id:data.stay_time
							}
							this.industryList = data.main_industry;
							this.info.store_level = data.store_level;
							this.info.service_money = data.service_money;
							let stay_time = data.stay_time_arr;
							let timeList = [];
							for (let attr in stay_time) {
								timeList.push({
									id: attr,
									name: stay_time[attr]
								});
							}
							this.timeList = timeList;
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 选择工作日
			handlerWeek(item) {
				this.workDayList.forEach(val => {
					if (val.id == item.id) val.isdo = !val.isdo;
				});
			},
			// 选择自营 非自营
			handlerManagement(type) {
				this.info.run_type = type;
			},
			/**
			 * @description 上传收款二维码
			 */
			upLoadImg(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], // 可以指定来源是相册还是相机，默认二者都有
					success: res => {
						console.log(res);
						let list = res.tempFilePaths;
						list.forEach((val, i) => {
							this.uploadUserImg(val, type);
						});
					}
				});
			},
			/**
			 * @description 上传图片
			 */
			uploadUserImg(blob, type) {
				// uni.showLoading();
				let _this = this;
				// 开始上传
				new UploadImage([blob], {
					complete: res => {
						console.log(res);
						if (res.length) {
							if (type == 'logo') {
								this.info.store_logo = res[0].id;
								this.store_logo = res[0].path;
							}
							if (type == 'bg') {
								this.info.store_backdrop = res[0].id;
								this.store_bg = res[0].path;
							}
						}
					}
				});
			},
			clearImg(type) {
				if (type == 'logo') {
					this.info.store_logo = '';
					this.store_logo = '';
				}
				if (type == 'bg') {
					this.info.store_backdrop = '';
					this.store_bg = '';
				}
			},
			get_store_apply() {
				let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
				let store_user_id = uni.getStorageSync('store_user_id') || 0;
				this.$api
					.post(
						'/v1/61039de5147b5', {}, {
							header: {
								Storeid: store_joinin_id,
								Userid: store_user_id
							}
						}
					)
					.then(res => {
						console.log(res);
						if (res.data.code == 1) {
							this.industryList = res.data.data.main_industry;
							this.info.store_level = res.data.data.store_level;
							this.info.service_money = res.data.data.service_money;
							let stay_time = res.data.data.stay_time;
							let timeList = [];
							for (let attr in stay_time) {
								timeList.push({
									id: attr,
									name: stay_time[attr]
								});
							}
							this.timeList = timeList;
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 上一步
			handlerPre() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 下一步
			handlerNext() {
				
				console.log(this.info,'this.info');
				let info = this.info;
				let regAliyun = /^(?:1[2-9]\d{9}|[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/;
				// let regEmoji =  /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g
				if (!info.store_name.trim()) return this.$message.info('请填写店铺名称');
				if (!info.store_logo) return this.$message.info('请上传店铺logo');
				if (!info.store_backdrop) return this.$message.info('请上传店铺背景');
				// if(!regEmoji.test(info.store_name)){
				// 	this.$message.info('名称不能输入表情');
				// 		return
				// 	}
				if (!info.main_industry) return this.$message.info('请选择主营行业');
				if (!info.stay_time) return this.$message.info('请选择入驻时长');
				let store_joinin_id = uni.getStorageSync('store_joinin_id') || 0;
				let store_user_id = uni.getStorageSync('store_user_id') || 0;
				if (!info.store_province_name || !info.store_city_name || !info.store_district_name) {
					return this.$message.info('请选择店铺所在地地址');
				}
				if (!info.store_address) return this.$message.info('请输入详细地址');
				if (!info.store_introduce) return this.$message.info('请输入店铺简介');
				// let workday = []
				// this.workDayList.forEach(item => {
				// 	if (item.isdo) workday.push(item.id)
				// })
				// if (workday.length > 0) {
				// 	info.workday = workday.join(',')
				// } else {
				// 	return this.$message.info('请选择工作日');
				// }

				// if (this.start_time && this.end_time) {
				// 	info.business_hours = this.start_time + '-' + this.end_time
				// } else {
				// 	return this.$message.info('请选择营业时间范围');
				// }
				if (!info.service_phone) return this.$message.info('请输入客服电话');
				console.log(info)
				this.$api
					.post('/v1/61039ea88c6ae', info, {
						header: {
							Storeid: store_joinin_id,
							Userid: store_user_id
						}
					})
					.then(res => {
						if (res.data.code == 1) {
							uni.reLaunch({
								url: '/pages/user/shop/shop-success/index'
							});
						} else {
							this.$message.info(res.data.msg);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 打开弹窗
			openPicker(type, time_type) {
				if (type == 'times') {
					this.time_type = time_type;
					if (!this.start_time && time_type == 'end') return this.$message.info('请先选择开始时间');
				}
				this.$refs[type].show();
			},
			onCancel() {},
			onConfirm(res, type) {
				console.log(res, type);
				if (type == 'city') {
					this.cityVal = res.obj;
				}
				if (type == 'industry') {
					this.industryVal = res.obj;
					this.info.main_industry = res.obj.id;
				}
				if (type == 'time') {
					this.timeVal = res.obj;
					this.info.stay_time = res.obj.id;
				}
				if (type == 'region') {
					this.info.store_province_name = res.obj.province.label;
					this.info.store_city_name = res.obj.city.label;
					this.info.store_district_name = res.obj.area.label;
					this.info.store_province_id = res.value[0];
					this.info.store_city_id = res.value[1];
					this.info.store_district_id = res.value[2];
					this.addr = res.result;
					if (res.obj.province.label == res.obj.city.label) this.addr = res.obj.city.label + res.obj.area.label;
				}
				if (type == 'times') {
					if (this.time_type == 'start') this.start_time = res.value;
					if (this.time_type == 'end') {
						let obj = res.value.split(':');
						let start_time_arr = this.start_time.split(':');
						let flag = true;
						if (Number(obj[0]) < Number(start_time_arr[0])) flag = false;
						if (Number(obj[0]) == Number(start_time_arr[0])) {
							if (Number(obj[1]) <= Number(start_time_arr[1])) flag = false;
						}
						if (flag) this.end_time = res.value;
						else this.$message.info('结束时间不能小于开始时间');
					}
				}
			},
			/**
			 * @func 定位地址
			 */
			location() {
				let _this = this;
				//#ifdef MP-WEIXIN
				uni.getSetting({
					success(res) {
						// 获取设置成功
						console.log(res.authSetting);
						if (!res.authSetting.userLocation) {
							// 如果没开启权限提示打开
							uni.openSetting({
								success(res) {
									// 打开成功，提示获取权限
									console.log(res.authSetting);
									uni.authorize({
										scope: 'scope.userLocation',
										success(res) {
											_this.chooseLocation();
										},
										fail(res) {
											console.log(res);
											this.$message.info('打开权限失败');
										}
									});
								}
							});
						} else {
							_this.chooseLocation();
						}
					}
				});
				//#endif
				this.chooseLocation();
			},
			/**
			 * @func 地图选点
			 */
			chooseLocation() {
				uni.chooseLocation({
					success: res => {
						console.log(res, '地图');
						this.myAmapFun.getRegeo({
							location: res.longitude + ',' + res.latitude,
							success: data => {
								//成功回调
								console.log('sdk回调', data);
								let regeoData = data[0].regeocodeData.addressComponent;
								let province = regeoData.province;
								let city = Array.isArray(regeoData.city) && regeoData.city
									.length == 0 ? regeoData.province : regeoData.city;
								let district = regeoData.district;

								this.info.store_province_name = province;
								this.info.store_city_name = city;
								this.info.store_district_name = district;
								// 详细地址是否含有省市区
								let addr = province + city + district;

								// 直辖市
								if (province == city) addr = province + district;
								this.addr = addr;
								let addrInfo = res.address;
								if (addrInfo.startsWith(addr)) addrInfo = addrInfo.replace(addr,
									'');
								if (addrInfo != res.name) this.info.store_address = addrInfo + res
									.name;
								else this.info.store_address = addrInfo;
								this.info.store_province_id = regeoData.adcode.substr(0, 2) +
									'0000';
								this.info.store_city_id = regeoData.adcode.substr(0, 4) + '00';
								this.info.store_district_id = regeoData.adcode + '';
							},
							fail: info => {
								//失败回调
								console.log(info);
							}
						});
					}
				});
			},
			/**
			 * @func 自动定位
			 */
			autoGetLocation() {
				console.log('auto ');
				uni.getLocation({
					geocode: true,
					success: adr => {
						console.log(adr);
						// #ifdef APP-PLUS
						let address = adr.address;
						let province = address.province;
						let city = Array.isArray(address.city) && address.city.length == 0 ? address.province :
							address.city;
						let district = address.district;
						this.addr = address.street + address.streetNum + address.poiName;

						this.info.store_province_name = province;
						this.info.store_city_name = city;
						this.info.store_district_name = district;
						this.store_address = address.street + address.streetNum + address.poiName;
						// #endif
						// #ifndef APP-PLUS
						this.myAmapFun.getRegeo({
							location: adr.longitude + ',' + adr.latitude,
							success: data => {
								//成功回调
								console.log('sdk回调', data);
								let regeoData = data[0].regeocodeData.addressComponent;
								let province = regeoData.province;
								let city = Array.isArray(regeoData.city) && regeoData.city
									.length == 0 ? regeoData.province : regeoData.city;
								let district = regeoData.district;

								this.info.store_province_name = province;
								this.info.store_city_name = city;
								this.info.store_district_name = district;
								this.store_address = data[0].desc;
								// console.log(this.province + this.city + this.district + this.store_address);
							},
							fail: info => {
								//失败回调
								console.log(info);
							}
						});
						// #endif
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page{
		padding: 0 32rpx;
		background-color: #FFFFFF;
	}
	.height-100 {
		height: 100rpx;
	}

	.placeholder {
		color: #bfbfbf;
		font-size: 28rpx;
	}

	.text-bf {
		color: #bfbfbf;
	}

	.shop-item {
		textarea {
			width: 100%;
			height: 200rpx;
			background: #f8f9f9;
			padding: 16rpx;
		}

		._left {
			width: 300rpx;
			position: relative;

			// &::after {
			// 	content: '*';
			// 	position: absolute;
			// 	left: -12rpx;
			// 	font-size: 28rpx;
			// 	color: red;
			// }

			&.none {
				&::after {
					content: '';
					position: absolute;
					left: -12rpx;
					font-size: 28rpx;
					color: red;
				}
			}
		}

		._right {
			width: calc(100% - 300rpx);

			.address {
				width: calc(100% - 52rpx);
			}

			.up-img {
				width: 150rpx;
				height: 150rpx;
				// border: 1px dashed #eeeeee;
				position: relative;

				// &.bg {
				// 	width: 240rpx;
				// 	height: 135rpx;
				// }

				// &::before {
				// 	content: '';
				// 	width: 60rpx;
				// 	height: 4rpx;
				// 	background: #eeeeee;
				// 	position: absolute;
				// 	top: 50%;
				// 	left: 50%;
				// 	transform: translate(-50%, -50%);
				// }

				// &::after {
				// 	content: '';
				// 	width: 4rpx;
				// 	height: 60rpx;
				// 	background: #eeeeee;
				// 	position: absolute;
				// 	top: 50%;
				// 	left: 50%;
				// 	transform: translate(-50%, -50%);
				// }
			}

			.img-wrap {
				width: 150rpx;
				height: 150rpx;
				border: 1px dashed #eeeeee;
				position: relative;
				

				&.bg {
					width: 375rpx;
					height: 135rpx;
				}

				.close {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					z-index: 111;
				}

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.cuIcon-squarecheckfill,
			.cuIcon-roundcheckfill {
				color: $bgtheme;
			}
		}
	}

	.btn-wrap {
		padding-bottom: 60rpx;

		.btn {
			width: 300rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 28rpx;
			color: $theme;
			background: #ffffff;
			border-radius: 44rpx;
			border: 1px solid $theme;

			&.active {
				background: $bgtheme;
				color: #ffffff;
			}
		}
	}
</style>
